<template>
  <div style="padding-bottom: 20px;">
    <div class="df">
      <h2>采购订单入库<span style="margin-left: 20px;color: #200281;">{{ Check.orderNo }}</span></h2>
    </div>
    <el-row :span="6" class="df" style="margin: 20px 0;">
      <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 60px;">
        <span style="display: block;width: 100px;">配送企业:</span>
        <el-input v-model="Check.companyName
          " size="mini" :disabled="true"></el-input>
      </el-col>
      <el-col :span="6">
        <span style="margin-right: 20px;">配送状态:</span>
        <el-select size="mini" v-model="state" placeholder="请选择" @change="list" :clearable="true">
          <el-option v-for="item in form" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <div class="df">
        <div style="width: 80px;"> 通用名:</div>
        <el-input v-model="form1" size="mini" placeholder="请输入通用名"></el-input>
      </div>
      <el-button type="primary" class="ml" @click="search">查询</el-button>
    </el-row>
    <el-alert type="info" show-icon  style="background-color: #d3deee;border: 1px solid #2558ac; color: #2558ac;font-size: 14px;">
      药品种类总数 <span class="number">{{ num }}</span> 项，已配送药品种类 <span class="number">{{ medicinesNum }}</span> 项，未配送 <span
        class="number">{{ delivered }}</span> 项。已入库药品种类 <span class="number">{{ Storage }}</span> 项，未入库 <span class="number">{{ NotStorage }}</span> 项。
    </el-alert>

    <el-table :data="tableData1" style="width: 100%;margin-top: 20px;" size="mini">
      <el-table-column prop="orderNo" label="流水号" width="180">
      </el-table-column>
      <el-table-column prop="medicineName" label="通用名" width="180">
      </el-table-column>
      <el-table-column prop="categoryName" label="品种名称">
      </el-table-column>
      <el-table-column label="采购数量">
        <template slot-scope="scope">
          {{ scope.row.purchaseAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="purchasePrice" label="采购价(元)">
      </el-table-column>
      <el-table-column prop="purchaseFee" label="采购金额(元)">
      </el-table-column>
      <el-table-column label="配送状态">
        <template slot-scope="scope">
          <el-tag :type="typec(scope)" plain disabled>{{ scope.row.label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="入库状态" props="status">
        <template slot-scope="scope">
          <el-switch size="mini" v-model="scope.row.status" @change="toTop(scope.row)" style="margin-right:10px">
          </el-switch>
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
      <el-table-column props="stockExplain" label="入库状态说明">
        <template slot-scope="scope">
          <el-input v-model="scope.row.stockExplain" :class="scope.row.styleValue ? '' : 'red'" size="mini"
            @input="toTop(scope.row)"></el-input>
          <span v-if="!scope.row.styleValue" style="color: red;">请填写入库状态说明</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 20px 0;margin-left: 60%;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="SIZE"
        :page-sizes="[10, 20, 30, 40]">
      </el-pagination>
    </div>
    <el-button class="width ret" type="primary" @click="pass(3)" style="display:0"><i class="el-icon-check"
        size="small"></i>确认通过</el-button>
    <el-button class="width mr" type="info" plain @click="nopass(1)"><i class="el-icon-close"
        size="small"></i>确认不通过</el-button>
    <el-button class="width" @click="hide" size="small">取消</el-button>
  </div>
</template>

<script>
import { isAll, getDetail, getUpdate, getToUpdate } from "../../api/businessTwo/order"
export default {
  props: {
    Check: {
      type: Object,
    },
    dialogScreen: {
      type: Boolean
    },
    flag1: {
      type: Boolean
    }
  },
  watch: {
    state(newValue, oldValue) {
      this.getList()
    }
  },
  data() {
    return {
      currentPage4: 1,
      selectedOption: -1,
      options: [{ id: 0, label: '已入库', value: 0 },
      { id: 1, label: '未入库', value: 1 },
      ],
      value2: null,
      state: '',
      form: [
        {
          value: '1',
          label: '已配送'
        },
        {
          value: '0',
          label: '未配送'
        }
      ],
      ids: [],
      SIZE: 0,
      pageSize: 10,
      num: 0,
      medicinesNum: 0,
      delivered: 0,
      Storage: 0,
      NotStorage: 0,
      value: true,
      form1: null,
      tableData: [],
      tableData1: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    toTop(data1) {
      this.shows()
      if (data1.status) {
        data1.status = true
        data1.statusName = "已入库"
      } else {
        data1.status = false
        data1.statusName = "未入库"
      }
      if (data1.deliverStatus === false) {
        data1.deliverStatus = 0
      } else if(data1.deliverStatus === true) {
        data1.deliverStatus = 1
      }
      if (data1.status === false) {
        data1.style = 0
      } else {
        data1.style = 1
      }

      this.ids.push({ id: data1.id, status: data1.style, stockExplain: data1.stockExplain })
      console.log(this.ids);
      console.log(data1);
    },
    handChange(data) {
      data.status = ""
    },
    nopass(num) {
      this.shows();
      this.tableData.some((v) => {
        if (v.status === false) {
          v.style = 0
        } else {
          v.style = 1
        }
        this.ids.push({ id: v.id, status: v.style, stockExplain: v.stockExplain })
        if (v.styleValue === false) {
          console.log(v);
          return this.$message.error(`${v.medicineName}药品未入库,请填写“入库状态说明”,便于配送企业调整。`);
        }
      })
      let choos = this.tableData.every((v) => {
        return v.styleValue === true
      })
      if (choos === true) {
        getToUpdate(this.ids).then((data) => {
          getUpdate({
            id:this.Check.id,
          status:num          }).then((data1)=>{
            this.getList();
          this.$message.warning('确认不通过');})

        });
        this.hide()
      }
    },
    pass(num) {
      this.shows();


      this.tableData.some((v) => {
        if (v.status === false) {
          v.style = 0
        } else {
          v.style = 1
        }
        this.ids.push({ id: v.id, status: v.style, stockExplain: v.stockExplain })
        if (v.passValue === false) {
          console.log(v);
          return this.$message.error(`${v.medicineName}药品入库状态核实异常，请核实。`);
        }
      })
      let choos = this.tableData.every((v) => {
        return v.passValue === true
      })
      if (choos === true) {

        console.log(this.ids);
        getToUpdate(this.ids).then((data) => {

          getUpdate({
            id: this.Check.id,
            status: num
          }).then((data1) => {
            this.getList();
            this.$message.success('确认通过');
          })
          this.hide()
        });

        this.hide()
      }
    },
    shows() {
      this.tableData.map((v) => {
        if (v.deliverStatus == 1 && v.status == false && !v.stockExplain) {
          v.styleValue = false
        } else if (v.deliverStatus == 0 && v.status == true && !v.stockExplain) {
          v.styleValue = false
        } else {
          v.styleValue = true
        }

        if (v.deliverStatus == 1 && v.status === false) {
          v.passValue = false
        } else if (v.deliverStatus == 0 && v.status === true) {
          v.passValue = false
        } else {
          v.passValue = true
        }

      })
    },
    async getList() {
      if (this.value2 === "" && this.form1 === "") {
        this.value2 = null
        this.form1 = null
      } else if (this.form1 === "") {
        this.form1 = null
      } else if (this.value2 === "") {
        this.value2 = null
      }
      let res = await isAll({
        deliveryCompanyName: this.Check.companyName,
        deliverStatus: this.state,
        medicineNo: this.form1,
        orderNo: this.Check.orderNo
      })
      if (res.data.code == 200) {
        res.data.data.map((v) => {
          v.purchaseAmount = Math.floor(v.purchaseAmount)

          return v

        })
        this.tableData = res.data.data
      }
      console.log(this.tableData);
      this.number()
      this.SIZE = this.tableData.length
      this.tableData.map((data1) => {
        if (data1.status == 1) {
          data1.status = true
          data1.statusName = "已入库"
        } else if (data1.status == 0) {
          data1.status = false
          data1.statusName = "未入库"
        }
      })
      this.changeTabel()
      this.shows()
    },
    typec(a) {
      if (a.row.deliverStatus == 1) {
        a.row.label = "已配送"
        return "success"
      } else {
        a.row.label = "未配送"
        return "info"
      }
    },
    list() {
      this.getList()
    },
    number() {
      this.medicinesNum = 0
      this.delivered = 0
      this.Storage = 0
      this.NotStorage = 0
      this.num = this.tableData.length
      this.tableData.map((v) => {
        if (v.deliverStatus == 1) {
          this.medicinesNum += 1
        } else {
          this.delivered += 1
        }
        if (v.status == 1) {
          this.Storage += 1
        } else {
          this.NotStorage += 1
        }
      })
    },
    changeTabel() {
      this.tableData1 = this.tableData.slice((this.currentPage4 - 1) * this.pageSize,
        this.currentPage4 * this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage4 = val
      this.changeTabel()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.changeTabel()
    },
    search() {
      this.getList()
    },
    hide() {
      this.$emit("changeSon", false)
    }
  }
}
</script>

<style lang="scss" scoped>
.df {
  display: flex;
  align-items: center;
}

.jcsb {
  justify-content: space-between;
}

.el-table {
  margin-bottom: 30px;
}

.ml {
  margin-left: 60px;
}

.number {
  font-size: 16px;
  color: #2558ac;
  font-weight: 700
}

::v-deep th {
  background-color: #f1f1f1;
}

h2 {
  font-size: 18px;
}

::v-deep .el-alert--info .el-alert__description {
  color: #000 !important;
}

.width {
  width: 120px;
  height: 36px;
}
::v-deep .el-alert{
      padding:4px 16px !important;
    }
    ::v-deep .el-alert__icon.is-big{
      font-size:22px !important;
    }
    ::v-deep .el-alert__description{
      margin:0

    }
.ret {
  margin-left: 30%;
  margin-right: 60px;
}

.mr {
  margin-right: 60px;
}

.red {
  border-radius: 5px;
  border: none;

  border: red solid 1px;
}

::v-deep th.el-table__cell {
  background-color: #fafafa;
}

::v-deep .el-table__cell {
  border-right: 1px solid #EBEEF5 !important;
  text-align: center;
}
</style>
